<html>
<head>
<meta charset="utf-8">
<style>
    a{text-decoration:none}
    .container{
        width:600px;
        height:auto;
        border-radius: 3px;
        box-shadow:0px 0px 2px #999999; 
    }
    #userImage{
        margin-top: 20px;
        margin-left: 20px;
    }
    #userName{            
        position: relative;
        top:-20px;
        left: 60px;
        font: normal 13px 微软雅黑 ;
    }
    a:link {color:black;}
    a:visited {color:black;} 
    .passage{
        margin-top: -20px;
        margin-left: 20px;
        width:600px;            
    }
    #passageName{
        position: relative;
        top:18px;
        font: normal 18px 微软雅黑 ;
    }
    #date{
        position: relative;
        float:right;
        top:10px;
        left:-45px;
        font: normal 13px 微软雅黑 ;
    }
    #passageMain{
        position: relative;
        top:5px;
        word-wrap: break-word; 
        word-break: normal; 
        width:560px;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 3;
        overflow: hidden;
        font: normal 15px 微软雅黑 ;
        
    }
    .media-box{
        position: relative;
        top:0px;
        width: 340px;
        height:120px;
    }
    .image1,.image2,.image3 img{
        width: 110px;
        height: 110px;
        background: black;
    }
    .image1{
        position:relative;
    }
    .image2{
        position:relative;
        top: -110px;
        left:113px;
    }
    .image3{
        position:relative;
        top: -220px;
        left:226px;
    }
    
</style>
</head>

<body>
    <div class="container">
        <div class="user-image">
            <a href=""><img src="头像.png" id="userImage" alt="" width="30" height="30" ></a>
        </div>
        <div class="user-name">
            <a id="userName" href="">用户名</a>
        </div>
        <div class="passage">
            <a href=""  id="passageName">XXX</a>
            <p id="date">XXX-XX-XX 11:11:11</p>
            <a href="" ><p id="passageMain"> 
                AAAAAAAAAAAAAAAAAAAABBBBBBBBBBBBCCCCCCCCDDDDDDDDDDDEEEEEEEUUUUFFFFFFGGGGGGGGG
                XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
                XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
            </p></a>
            <div class="media-box">
                <div class=image1><img src="" ></div>
                <div class=image2><img src="" ></div>
                <div class=image3><img src="" ></div>
            </div>
        </div>
    </div>
</body>
</html>